1
00:00:03,000 --> 00:00:06,478
Настроихме нашия първоначален проект Next.js,

2
00:00:06,478 --> 00:00:09,186
и започнахме местното развитие

3
00:00:09,186 --> 00:00:11,818
сървър с командата "следващ разработчик".

4
00:00:11,893 --> 00:00:15,418
Сега, ако се опитаме да отворим уебсайта си в браузъра,

5
00:00:15,418 --> 00:00:18,698
в момента просто получаваме съобщение „не е намерено“,

6
00:00:18,698 --> 00:00:22,749
защото все още нямаме страници в нашето приложение.

7
00:00:22,749 --> 00:00:26,059
Нека спрем сървъра за известно време,

8
00:00:26,059 --> 00:00:28,400
и вижте как да дефинирате страница.

9
00:00:28,480 --> 00:00:31,807
Можем да добавим начална страница просто като създадем

10
00:00:31,807 --> 00:00:34,647
нов файл в папката "приложение",

11
00:00:34,728 --> 00:00:37,490
наречен "page.jsx".

12
00:00:37,490 --> 00:00:39,968
Точно като файла "layout",

13
00:00:39,968 --> 00:00:43,784
файлът "page" трябва да експортира React компонент,

14
00:00:43,784 --> 00:00:45,876
нека го наречем "Начална страница".

15
00:00:46,184 --> 00:00:49,562
И тук можем да върнем някои JSX елементи.

16
00:00:49,562 --> 00:00:52,952
Нека започнем с просто заглавие "h1",

17
00:00:52,952 --> 00:00:55,647
казвайки „Моята първа страница Next.js“.

18
00:00:55,734 --> 00:00:59,176
Така че това ще бъде съдържанието на нашата начална страница.

19
00:00:59,176 --> 00:01:01,811
Нека запазим този файл и да започнем

20
00:01:01,811 --> 00:01:03,682
сървъра в терминала.

21
00:01:03,752 --> 00:01:06,281
Сега, тъй като ще използваме „следващия

22
00:01:06,281 --> 00:01:08,160
dev" през цялото време,

23
00:01:08,232 --> 00:01:10,631
по-добре е да добавим "скрипт"

24
00:01:10,631 --> 00:01:12,505
към нашия файл package.json.

25
00:01:12,580 --> 00:01:15,155
Можем да дефинираме "dev" скрипт, това

26
00:01:15,155 --> 00:01:17,275
изпълнява командата "следваща разработка".

27
00:01:17,350 --> 00:01:19,041
По този начин, в терминала

28
00:01:19,110 --> 00:01:22,219
вместо това можем да напишем „npm run dev“,

29
00:01:22,219 --> 00:01:25,185
и това ще изпълни "следваща разработка",

30
00:01:25,185 --> 00:01:28,151
стартиране на сървъра на порт 3000.

31
00:01:28,240 --> 00:01:31,857
Чрез изброяване на всички наши скриптове в package.json

32
00:01:31,857 --> 00:01:34,527
също така е по-лесно да видите кои команди

33
00:01:34,527 --> 00:01:36,565
са налични в нашия проект.

34
00:01:36,635 --> 00:01:39,053
Както и да е, ако се върнем към браузъра,

35
00:01:39,053 --> 00:01:40,360
и презареди страницата,

36
00:01:40,426 --> 00:01:42,586
можете да видите, че сега се показва

37
00:01:42,586 --> 00:01:44,747
заглавието, което написахме в нашия код.

38
00:01:44,812 --> 00:01:48,684
Така че нашата начална страница се показва правилно.

39
00:01:48,684 --> 00:01:51,508
Сега, докато работя върху нашите страници, ще го направя

40
00:01:51,508 --> 00:01:54,332
винаги използвайте инструментите за разработчици на Chrome,

41
00:01:54,406 --> 00:01:56,651
които можете да отворите от това меню,

42
00:01:56,651 --> 00:01:58,557
или с клавишна комбинация.

43
00:01:58,625 --> 00:02:01,488
По този начин можем да видим всички съобщения в журнала

44
00:02:01,488 --> 00:02:03,317
отпечатани на конзолата.

45
00:02:03,397 --> 00:02:06,751
За повечето видеоклипове ще запазя и браузъра

46
00:02:06,751 --> 00:02:09,583
в по-малък прозорец от дясната страна,

47
00:02:09,657 --> 00:02:12,036
и прозореца Visual Studio Code

48
00:02:12,036 --> 00:02:13,909
в останалата част от екрана,

49
00:02:13,981 --> 00:02:16,957
така че можете да видите и двата кода в редактора,

50
00:02:16,957 --> 00:02:19,341
и в същото време какво е страницата

51
00:02:19,341 --> 00:02:21,164
изглежда като в браузъра.

52
00:02:21,234 --> 00:02:24,101
Сървърът за разработка ще се актуализира автоматично

53
00:02:24,101 --> 00:02:26,753
страницата всеки път, когато променим нашия код.

54
00:02:26,825 --> 00:02:29,402
Нека променим това заглавие например,

55
00:02:29,565 --> 00:02:31,845
и го задайте на „Indie Gamer“, това

56
00:02:31,845 --> 00:02:34,055
ще бъде името на нашия уебсайт.

57
00:02:34,124 --> 00:02:37,000
Веднага след като запазим тази промяна, страницата

58
00:02:37,000 --> 00:02:39,444
ще актуализира и ще покаже новия текст.

59
00:02:39,516 --> 00:02:41,589
През повечето време можем да си тръгнем

60
00:02:41,589 --> 00:02:43,448
терминалният панел се затвори.

61
00:02:43,519 --> 00:02:46,651
Сървърът за разработка все още ще работи така или иначе.

62
00:02:46,651 --> 00:02:49,187
Можем да добавим параграф към тази страница,

63
00:02:49,291 --> 00:02:51,560
със слоган, казващ „Само

64
00:02:51,560 --> 00:02:53,343
най-добрите инди игри,"

65
00:02:53,424 --> 00:02:54,878
„прегледано за вас“.

66
00:02:56,064 --> 00:03:00,275
Сега в JSX трябва да имаме един основен елемент,

67
00:03:00,275 --> 00:03:03,700
така че ще обвия всичко във фрагмент на React,

68
00:03:03,700 --> 00:03:05,669
това е този специален елемент

69
00:03:05,669 --> 00:03:07,356
написан като празен таг.

70
00:03:07,427 --> 00:03:09,873
По този начин страницата ще изобрази и двете

71
00:03:09,873 --> 00:03:12,031
заглавието и параграфа.

72
00:03:12,103 --> 00:03:14,605
И така, тази страница работи доста добре

73
00:03:14,605 --> 00:03:17,106
като всеки друг компонент на React.

74
00:03:17,187 --> 00:03:19,801
Какво е специалното за Next.js,

75
00:03:19,801 --> 00:03:22,236
и App Router, е това

76
00:03:22,326 --> 00:03:25,562
това, което е в страницата, ще бъде вмъкнато в

77
00:03:25,562 --> 00:03:28,716
документът, дефиниран от RootLayout.

78
00:03:28,797 --> 00:03:31,553
В момента това оформление просто се показва

79
00:03:31,553 --> 00:03:33,863
децата вътре в "тялото".

80
00:03:33,937 --> 00:03:36,827
Но можем да добавим други елементи тук.

81
00:03:36,827 --> 00:03:39,505
Например в повечето приложения, които ще искаме

82
00:03:39,505 --> 00:03:42,182
общ "хедър" за всички страници.

83
00:03:42,256 --> 00:03:46,049
Засега просто ще напиша текст за заместител.

84
00:03:46,049 --> 00:03:49,704
Тогава съдържанието на страницата ще бъде централната част.

85
00:03:49,704 --> 00:03:53,108
Всъщност можем да го опаковаме в "главен" елемент,

86
00:03:53,108 --> 00:03:55,630
което е добра практика и ще

87
00:03:55,630 --> 00:03:57,634
също така да бъде полезно за стилизиране.

88
00:03:57,708 --> 00:04:00,626
Обикновено ще искаме и "долен колонтитул",

89
00:04:00,788 --> 00:04:03,052
показване на друго съдържание.

90
00:04:03,052 --> 00:04:05,716
И ако запазим актуализираното оформление,

91
00:04:05,716 --> 00:04:07,983
можете да видите тази страница сега

92
00:04:07,983 --> 00:04:10,017
има горен и долен колонтитул.

93
00:04:10,095 --> 00:04:13,197
Между другото, поставих текста в квадратни скоби

94
00:04:13,197 --> 00:04:16,161
само за да покажа, че те са заместители,

95
00:04:16,230 --> 00:04:19,728
това не е специален синтаксис или нещо подобно.

96
00:04:19,728 --> 00:04:22,269
Въпросът е, че елементите ние

97
00:04:22,269 --> 00:04:24,425
връщане в компонента на страницата

98
00:04:24,502 --> 00:04:27,285
се изобразяват вътре в тези от

99
00:04:27,285 --> 00:04:29,233
компонентът на оформлението.

100
00:04:29,326 --> 00:04:31,599
Така че в този смисъл можете да мислите

101
00:04:31,599 --> 00:04:33,720
на оформлението като шаблон,

102
00:04:33,796 --> 00:04:36,479
което ще важи за всички страници.